import styles from "../index.module.less";
import GridItem from "../common/GridItem";
import LineChart from "./LineChart";
import { merchantMap } from "../store";

export default defineComponent({
  setup(props, { expose }) {
    const _self = reactive<any>(getCurrentInstance());
    const queryParams = reactive<any>({
      merchant_user_id: "",
    });
    const formInline = reactive<any>({
      today_hour_list: [],
      today_pay_order_num: "",
      today_pay_people_num: "",
      today_pv: "",
      today_total: "",
      today_uv: "",
      updated_at: "",
      yesterday_hour_list: [],
      yesterday_pay_order_num: "",
      yesterday_pay_people_num: "",
      yesterday_pv: "",
      yesterday_total: "",
      yesterday_uv: "",
    });
    const fetchData = async () => {
      const res = await overviewApi.queryTimelyFact({
        merchant_user_id:
          queryParams.merchant_user_id === ""
            ? undefined
            : queryParams.merchant_user_id,
      });
      initObjAttr(formInline, res.data, "target");
    };
    const initPage = async () => {
      await fetchData();
      _self.refs.line_chart.initPage();
    };
    expose({ initPage });
    return () => (
      <div class={styles.timely_fact}>
        <div class={styles.Flex_wrap}>
          <div class={styles.flex_item}>
            <s-title style="margin-bottom: 0px">
              <div style="display: flex;column-gap: 16px;align-items: center;">
                <i>{$t("overview2")}</i>
                <i style="font-weight: normal;font-size: 16px;">
                  ({$t("overview63")}：
                  {!isEmptyType(formInline.updated_at)
                    ? $dayjs(formInline.updated_at).format(
                        "YYYY-MM-DD HH:mm:ss"
                      )
                    : undefined}
                  )
                </i>
              </div>
            </s-title>
          </div>
          <div class={styles.flex_item}>
            <div class={styles.title}>{$t("table14")}：</div>
            <div>
              <a-select
                v-model:value={queryParams.merchant_user_id}
                onChange={(value) => {
                  initPage();
                }}
                style="width: 150px"
                placeholder={$t("placeholder24")}
                options={merchantMap}
              ></a-select>
            </div>
          </div>
        </div>

        <div class={styles.chart_container}>
          <a-row gutter={16}>
            <a-col span={14}>
              <div class={styles.chart_wrap}>
                <div class={styles.tips}>
                  <div class={styles.pay}>{$t("overview3")}</div>
                  <div class={styles.num}>
                    {(formInline.today_total / 100).toFixed(2)}
                  </div>
                  <div class={styles.yesterday}>
                    {$t("overview4")}：
                    {(formInline.yesterday_total / 100).toFixed(2)}
                  </div>
                </div>
                <LineChart
                  ref="line_chart"
                  yesterday_hour_list={formInline.yesterday_hour_list}
                  today_hour_list={formInline.today_hour_list}
                />
              </div>
            </a-col>
            <a-col span={10}>
              <div class={styles.Grid_Box}>
                <GridItem
                  record={{
                    title: $t("overview5"),
                    tips: $t("overview9"),
                    data: formInline.today_uv,
                    compare: `${$t("overview4")}：${formInline.yesterday_uv}`,
                  }}
                />
                <GridItem
                  record={{
                    title: $t("overview6"),
                    tips: $t("overview10"),
                    data: formInline.today_pay_people_num,
                    compare: `${$t("overview4")}：${
                      formInline.yesterday_pay_people_num
                    }`,
                  }}
                />
                <GridItem
                  record={{
                    title: $t("overview7"),
                    tips: $t("overview11"),
                    data: formInline.today_pv,
                    compare: `${$t("overview4")}：${formInline.yesterday_pv}`,
                  }}
                />
                <GridItem
                  record={{
                    title: $t("overview8"),
                    tips: $t("overview12"),
                    data: formInline.today_pay_order_num,
                    compare: `${$t("overview4")}：${
                      formInline.yesterday_pay_order_num
                    }`,
                  }}
                />
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    );
  },
});
